<template>
  <div class="page">
    <div class="space">
      <van-nav-bar
        :class="navBarSticky == true ? 'nav-bar-sticky' : ''"
        title="我的空间"
        left-text="返回"
        left-arrow
        :border="false"
        :fixed="true"
        @click-left="onClickLeft"
      />
      <div class="space-lg-image">
        <van-image
          width="100%"
          height="100%"
          src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1593623156&di=586e27407b61cb3866e43af8dfd58d85&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
        />
      </div>
      <div class="user-small-image">
        <van-image
          width="80"
          height="80"
          radius="5"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="menu-count">
        <div class="menu-item">
          <p>说说</p>
          <p class="count">172</p>
        </div>
        <div class="menu-item">
          <p>相册</p>
          <p class="count">2001</p>
        </div>
        <div class="menu-item">
          <p>留言</p>
          <p class="count">66</p>
        </div>
        <div class="menu-item">
          <p>访客</p>
          <p class="count">17222</p>
        </div>
      </div>
      <div class="space-info-list">
        <div class="space-info">
          <van-cell title="单元格" icon="shop-o" :center="true" :border="false">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <van-image
                width="44"
                height="44"
                radius="5"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
            </template>
            <template #title>
              <span class="custom-title">今夕何夕</span>
            </template>
            <template #label>
              <span class="custom-title">2018-02-02</span>
            </template>
            <template #right-icon>
              <van-icon name="arrow-down" />
            </template>
          </van-cell>
          <div class="space-info-detail">
            vue组件内调用时 引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载
            $toast 方法，便于在组件内调用。 export default { mounted() {
            this.$toast('提示文案'); } }
          </div>
          <van-image
            class="my-image"
            height="180px"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="mobile-name">小米4s</div>
          <div class="other-info">
            <div class="view-count">浏览84次</div>
            <div class="tools">
              <span><van-icon name="good-job" />点赞</span>
              <span><van-icon name="chat" />品论</span>
              <span><van-icon name="share" />转发</span>
            </div>
          </div>
          <div class="chat-info">
            <p class="blue-text"><van-icon name="good-job" />8人觉得很赞</p>
            <p><span class="blue-text">诗雨：</span><span>你又玩</span></p>
            <p>
              <span class="blue-text">今夕何夕回复：</span><span>玩啊</span>
            </p>
            <p><span class="blue-text">诗雨：</span><span>你又玩</span></p>
            <p><span class="blue-text">诗雨：</span><span>你又玩</span></p>
          </div>
          <div class="criticism">
            <van-field v-model="value" placeholder="评论" :border="false" />
          </div>
        </div>
        <div class="space-info">
          <van-cell title="单元格" icon="shop-o" :center="true" :border="false">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <van-image
                width="44"
                height="44"
                radius="5"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
            </template>
            <template #title>
              <span class="custom-title">今夕何夕</span>
            </template>
            <template #label>
              <span class="custom-title">2018-02-02</span>
            </template>
            <template #right-icon>
              <van-icon name="arrow-down" />
            </template>
          </van-cell>
          <div class="space-info-detail">
            要展示的图片在数组中，数组可能为空，也可能为空数组，默认展示第一张图片。
          </div>
          <!-- <van-image
            class="my-image"
            height="180px"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          /> -->
          <div class="mobile-name">小米4s</div>
          <div class="other-info">
            <div class="view-count">浏览84次</div>
            <div class="tools">
              <span><van-icon name="good-job" />点赞</span>
              <span><van-icon name="chat" />品论</span>
              <span><van-icon name="share" />转发</span>
            </div>
          </div>
          <div class="chat-info">
            <p class="blue-text"><van-icon name="good-job" />8人觉得很赞</p>
            <p><span class="blue-text">诗雨：</span><span>你又玩</span></p>
            <p>
              <span class="blue-text">今夕何夕回复：</span><span>玩啊</span>
            </p>
            <p><span class="blue-text">诗雨：</span><span>你又玩</span></p>
            <p><span class="blue-text">诗雨：</span><span>你又玩</span></p>
          </div>
          <div class="criticism">
            <van-field v-model="value" placeholder="评论" :border="false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navBarSticky: false,
      value:""
    };
  },
  mounted() {
    this.$store.commit("hideTabBar");
    //滚动事件监听
    window.addEventListener("scroll", this.watchScroll);
  },
  methods: {
    watchScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 100) {
        this.navBarSticky = true;
      } else {
        this.navBarSticky = false;
      }
    },
    onClickLeft() {
      this.$router.push("/user");
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.watchScroll);
  }
};
</script>

<style lang="less" scoped>
.space {
  /deep/ .van-nav-bar {
    background: rgba(0, 0, 0, 0);
    /deep/ .van-icon {
      color: #ffffff;
    }
    /deep/ .van-nav-bar__text {
      color: #ffffff;
    }
    /deep/ .van-nav-bar__title {
      color: #ffffff;
    }
  }
  .nav-bar-sticky {
    background: #f7f8fa;
    /deep/ .van-icon {
      color: black !important;
    }
    /deep/ .van-nav-bar__text {
      color: black !important;
    }
    /deep/ .van-nav-bar__title {
      color: black !important;
    }
  }
  .space-lg-image {
    height: 250px;
  }
  .user-small-image {
    position: absolute;
    top: 150px;
    left: 20px;
    img {
      opacity: 0.9;
    }
  }
  .menu-count {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .menu-item {
      width: 25%;
      text-align: center;
      border-right: 1px solid #f2f3f5;
      .count {
        font-size: 13px;
        padding-top: 5px;
      }
    }
  }
  .space-info-list {
    .space-info {
      background: #ffffff;
      margin-top: 8px;
      .van-cell__title {
        padding-left: 10px;
      }
      .space-info-detail {
        padding: 0px 16px;
      }
      .my-image {
        padding: 5px 16px;
      }
      .mobile-name {
        padding: 5px 16px;
        font-size: 12px;
        color: gray;
      }
      .other-info {
        padding: 5px 16px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        border-bottom: 1px solid #f2f3f5;
        .tools {
          span {
            padding-left: 20px;
          }
        }
      }
      .chat-info {
        padding: 5px 16px;
        font-size: 12px;
      }
      .blue-text {
        color: #0a4bc3e0;
      }
      .criticism {
        padding-bottom: 20px;
      }
    }
  }
}
</style>
